<template >
    <div>
        <!-- <p>
            {{Article}}
        </p> -->
        <div class="searchArticle">
            <el-input v-model="input" placeholder="请输入内容" style="width:500px"></el-input>
            <el-button type="primary" icon="el-icon-search">搜索</el-button>
            <el-button type="danger" icon="el-icon-delete" @click="handleDelete(multipleSelection)">删除</el-button>
        </div>
        <div class="articleList">
                  
            <template>
            <el-table
                ref="multipleTable"
                :data="this.tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">

                <el-table-column
                type="selection"
                width="55">
                </el-table-column>

                <el-table-column
                prop="user"
                label="作者"
                width="120">
                </el-table-column>

                <el-table-column
                prop="title"
                label="标题"
                width="360">
                </el-table-column>

                <el-table-column
                prop="class"
                label="类目"
                width="120">           
                </el-table-column>

                <el-table-column
                prop="date"
                label="日期"
                width="120">
                
                </el-table-column>
                
                <!-- <el-table-column label="操作">
                    <template slot-scope="scope">
                        
                        <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                    </el-table-column> -->
            </el-table>
        
            </template>
        </div>
            <div class="articleListBottom">
           <!-- 分页 -->
                <div class="block">
                    <!-- <span class="demonstration">完整功能</span> -->
                    <!-- layout 布局 -->
                    <el-pagination
                    
                    @size-change="handleSizeChange" 
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20]"
                    :page-size="5"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total=this.articleCount>
                    </el-pagination>
                </div>
            </div>
    </div>
</template>



<script>
import { mapState } from 'vuex'
import axios from 'axios';
  export default {
    data() {
      return {
        input:'',
        tableData: [],
        multipleSelection: [],
        // 当前页 默认打开第一页
        currentPage: 1,
        pagesize:5
      }
    },

    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        // console.log(this.multipleSelection)
      },
    //   设置每页多少文章
      handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.pagesize = val
        this.currentPage=1
        this.getArticleDate()
      },
      //跳转到第几页
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.currentPage = val
        this.getArticleDate()
      },
    //   获取展示的数据 需要传入 当前页 和 每页多少 两个参数
        getArticleDate(){
            //根据 当前页 和 每页多少 更新文章信息
            axios.get('http://localhost/getArticalData',{
                params: {
                    username: this.username,
                    startIndex:(this.currentPage-1)*this.pagesize,
                    endIndex:this.pagesize,
                }
            }).then(res=>{
                this.tableData =res.data
                // console.log(this.tableData)
            }).catch(err => {
                console.log("获取数据失败" + err);
            })
        },
        // eslint-disable-next-line no-unused-vars
        handleDelete(articleData) { //row 是内容
        // console.log(articleData)
        // console.log('这里是第'+this.currentPage+'页'+'index:'+index, 'rouw:'+row+'应该删除数据库第'+((this.currentPage-1)*5+index+1)+'项');
      //删除数据库第X项
      console.log('开始删除...')

            for(var i = 0 ; i<articleData.length;i++){
            //删除某个id的数据
                axios.get('http://localhost/deleteArticleData',{
                        params: {
                            id:articleData[i].id
                        }
                    // eslint-disable-next-line no-unused-vars
                    }).then(res=>{
                        this.getArticleDate()
                       
                    }).catch(err => {
                        console.log("获取数据失败" + err);
                    }) 

                this.$store.state.deleteCount++
      
                localStorage.setItem('deleteCount',JSON.stringify(this.$store.state.deleteCount))
           
            //文章类目-1
                axios.get('http://localhost/deleteClassCount',{
                        params: {
                            class:articleData[i].class
                        }
                    // eslint-disable-next-line no-unused-vars
                    }).then(res=>{
                        this.$store.commit('updateUserClass')
                       
                    }).catch(err => {
                        console.log("获取数据失败" + err);
                    }) 
        
            }
        
            if(this.$store.state.articleCount==0){
                
                // localStorage.setItem('deleteData',JSON.stringify(deleteData))
                this.$store.state.deleteCount=0
            }
           
            

      }
    },
     computed:mapState({
        Article:'userarticle',
        articleCount:'articleCount',
        username:'username'
    }),
    mounted() {
        window.updateArticlePage=this.getArticleDate()
    },
    created() {
        this.getArticleDate()
    },
  }
</script>

<style scoped>
    .searchArticle{
        display: flex;
        justify-content: center
    }
    .searchArticle .el-input{
        margin: 0 10px
    }

    .articleList {
        
        display: flex;
        width: 1000px;
        background-color: pink;
        justify-content: center;
        /* border: 1px solid black; */
        margin: 10px auto
    }
    .articleListBottom{
        display: flex;
        justify-content: center;
        align-items: center;
        /* background-color: black */
    }
</style>
